<template>
	<view class="content">
		<!-- 导航栏 -->
		<uni-nav-bar class="nav-bar" title="智慧停车" leftText="返回" @clickLeft="back" leftIcon="left" rightIcon="vip"
			backgroundColor="#090" color="#FFF"></uni-nav-bar>
		<!-- 地图组件 -->
		<map id="parkingMap" class="parking-map" longitude="116.41289" latitude="40.075248" scale="14"
			:markers="mapMarkers" @markertap="doMarkerTap" />
		<!-- 图表组件 -->
		<view class="charts-box">
			<qiun-data-charts type="column" :charData="charData" />
		</view>
	</view>
</template>

<script>
	import {
		parkingZoneList
	} from '../../service';

	export default {
		data() {
			return {
				charData: {},
				parkingZones: [],
				//地图标记点
				mapMarkers: []
			}
		},
		async onLoad() {
			const data = await parkingZoneList()
			this.parkingZones = data
			this.mapMarkers = this.parkingZones.map(item => {
				return {
					id: item.zid,
					longitude: item.longitude,
					latitude: item.latitude,
					iconPath: '/static/img/loc.png ',
					callout: {
						content: `${item.zname}:${item.unoccupied}`,
						bgColor: '#090',
						color: '#FFF'
					}
				}
			})
			this.charData = {
				categories: this.parkingZones.map(item => item.zname),
				series: [{
					name: "车位数",
					data: this.parkingZones.map(item => item.unoccupied)
				}]
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			doMarkerTap(e) {
				console.log(e.detail);
				const mapContext = uni.createMapContext('parkingMap', this)
				mapContext.moveToLocation({
					longitude: e.detail.longitude,
					latitude: e.detail.latitude,
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		display: block;

		::v-deep .uni-navbar__content {
			display: block;
		}
	}

	.parking-map {
		width: 750rpx;
		height: 450rpx;
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>